<template>
	<e-popup :show="show" round="20rpx">
		<view class="refund-popup">
			<view class="header e-rela">
				<view class="text-center fw-600 e-font-32">
					{{ $t(`order.${type == 1 ? '取消订单' : '订单退款'}`) }}
				</view>
				<view class="close-btn e-abso" @tap="$emit('close')">
					<app-image :size="['36rpx']" src="classify/close.png" />
				</view>
			</view>
			<view class="radio">
				<view class="title">{{ $t(`order.${type == 1 ? '取消原因标题' : '退款原因标题'}`) }}：</view>
				<radio-group @change="radioChange">
					<label class="e-flex e-p-30" v-for="(item, index) in orderCancelText" :key="item.dictCode">
						<view>
							<radio :color="color" :value="item.dictLabel" :checked="current == item.dictLabel" />
						</view>
						<view>{{ item.dictLabel }}</view>
					</label>
				</radio-group>
				<view class="button-box e-p-t-60">
					<e-button size="large" :color="color" shape="circle" :text="text || $t(`order.${type == 1 ? '确定取消' : '确定退款'}`)" @click="confirm"></e-button>
				</view>
			</view>
		</view>
	</e-popup>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	}
	// #endif
});
</script>

<script setup lang="ts">
import { ref } from 'vue';
import { useOrder, useInit } from '@/common/stores';
import { storeToRefs } from 'pinia';
import { useCurrentInstance } from '@/common/hooks';
import { useI18n } from 'vue-i18n';

const props = defineProps({
	show: Boolean,
	color: String,
	type: Number,
	text: String
});
const emit = defineEmits(['confirm']);
const ctx = useCurrentInstance();
const { t } = useI18n();

const orderStore = useOrder();
const { orderCancelText } = storeToRefs(orderStore);

if (!orderCancelText.value.length) {
	orderStore.getOrderCancelText();
}

const current = ref('');

const radioChange = (e: { detail: { value: string } }) => {
	current.value = e.detail.value;
};
const confirm = () => {
	if (current.value) {
		emit('confirm', current.value);
	} else {
		ctx.$toastApp(t('order.请选择退款原因'));
	}
};
</script>

<style scoped lang="scss">
.refund-popup {
	// height: 610rpx;
	.header {
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 2rpx solid #e2e2e2;
		.close-btn {
			top: 26rpx;
			right: 32rpx;
		}
	}
	.radio {
		padding-bottom: 20rpx;
		.title {
			padding: 18rpx 30rpx;
		}
	}
	.button-box {
		padding: 0 30rpx;
	}
}
</style>
